<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-12-19 15:15:18
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-20 18:14:22
 * @FilePath: /hr_new_vue3/src/views/Management/Home/LeaveManagement/WorkHandover/Template/Confirm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 确认发起 -->
<template>
  <div class="index" v-if="formData.baseInfo">
    <a-form
      ref="refForm"
      :model="formData.baseInfo"
      layout="vertical"
      :rules="rules"
    >
      <a-form-item field="userName" label="交接人员">
        <a-input
          v-model="formData.baseInfo.userName"
          placeholder=""
          allow-clear
          disabled
          style="width: 350px"
        />
      </a-form-item>
      <a-form-item field="confirmId" label="确认人">
        <a-select
          placeholder="请选择"
          v-model="formData.baseInfo.confirmId"
          allow-search
          allow-clear
          @popup-visible-change="showHumanModal"
          :popup-visible="false"
          style="width: 350px"
        >
          <a-option
            v-for="item in humanList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="name" label="工作交接表模板名称">
        <a-input
          v-model="formData.baseInfo.name"
          placeholder="请输入模板名称"
          allow-clear
          style="width: 350px"
        />
      </a-form-item>
    </a-form>
  </div>
  <HumanRosterModal
    style="z-index: 9999"
    v-model:visible="humanModalVisible"
    @humanRosterEmit="humanRosterEmit"
  ></HumanRosterModal>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core';
import { GetLeaveQuitList } from '@/apis/management/human/baseSetting/leaveSetting';
import { getAllHumanRoster } from '@/utils/common';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const formData = useVModel(props, 'data', emit);

const rules = {
  name: {
    required: true,
    message: '请输入模板名称'
  },
  userName: {
    required: true,
    message: '请输入'
  },
  confirmId: {
    required: true,
    message: '请选择确认人'
  }
};

let humanList = ref();
const getAllHumanList = async () => {
  const res = await getAllHumanRoster();
  humanList.value = res;
};
getAllHumanList();

let humanModalVisible = ref(false);

// 显示人员弹框
const showHumanModal = () => {
  humanModalVisible.value = true;
};
const humanRosterEmit = (record: any) => {
  //
  formData.value.baseInfo.confirmId = record.id;
  formData.value.baseInfo.confirmName = record.name;
};

let refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  return check;
};
defineExpose({ formData, validate });
</script>
<style scoped lang="less">
.index {
}
</style>
